<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />

    <!-- 用户信息 -->
    <input type="file" 
           hidden 
           ref="input" 
           multiple 
           accept=".png , .jpg"
           @change="onSlected"
    />
    <van-cell is-link title="头像" @click="$refs.input.click()">
        <van-image width="0.8rem" height="0.8rem" :src="userInfo.photo" />
    </van-cell>

    <van-cell is-link title="姓名" @click="isShowNcname = true">
      <span>{{ userInfo.name }}</span>
    </van-cell>

    <van-cell is-link title="性别" @click="isShowGender = true">
      <span>{{ userInfo.gender === 0 ? "男" : "女" }}</span>
    </van-cell>

    <van-cell is-link title="生日" @click="isShowBirthday = true">
      <span>{{ userInfo.birthday }}</span>
    </van-cell>

    <!-- 头像 -->
    <van-popup
      v-model="isShowAvatar"
      position="bottom"
      :style="{ height: '100%' }"
    >

    <!-- @update-photo=";[(userIfo.photo = $event),(isShowAvatar = $event)]" -->
      <update-avatar 
         :photo="photo" 
         @close="isShowAvatar = false"
         v-if="isShowAvatar"

      ></update-avatar>
    </van-popup>

    <van-popup
      v-model="isShowNcname"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-nickname
        v-if="userInfo.name && isShowNcname"
        :name.sync="userInfo.name"
        @close="isShowNcname = false"
      ></update-nickname>
    </van-popup>

    <van-popup
      v-model="isShowGender"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <update-gender
        v-if="userInfo.name && isShowGender"
        :gender.sync="userInfo.gender"
        @close="isShowGender = false"
      ></update-gender>
    </van-popup>

    <van-popup
      v-model="isShowBirthday"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        :birthday.sync="userInfo.birthday"
        @close="isShowBirthday = false"
      ></update-birthday> -->

      <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        v-model="userInfo.birthday"
        @close="isShowBirthday = false"
      ></update-birthday>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileAPI } from "@/api";
import UpdateNickname from "./components/UpdateNickname";
import UpdateGender from "./components/UpdateGender";
import UpdateBirthday from "./components/UpdateBirthday";
import UpdateAvatar from "./components/UpdateAvatar";

import { resolveToBase64 } from '@/utils/index'

export default {
  data() {
    return {
      userInfo: {},
      isShowNcname: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowAvatar: false,
      photo:''
    };
  },

  components: {
    UpdateNickname,
    UpdateGender,
    UpdateBirthday,
    UpdateAvatar,
  },
  created() {
    this.getUserProfile();
  },

  methods: {
    async getUserProfile() {
      const { data } = await getUserProfileAPI();
      this.userInfo = data.data;
      },

      async onSlected() {
        //1获取用户选择的文件
          const file = this.$refs.input.files[0]
        //   console.log(file);

        //2讲file转成base64
        const base64 = await resolveToBase64(file)
         this.photo = base64
         //3 打开弹出层
         this.isShowAvatar = true
         //4手动将input.vaue属性清空
         this.$refs.input.value = ''
       }
  },
};
</script>

<style>
</style>